<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>CSS3和jQuery实现的3D相册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="3D Gallery with CSS3 and jQuery"/>
    <meta name="keywords" content="3d, gallery, jquery, css3, auto, slideshow, navigate, mouse scroll, perspective"/>
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" type="text/css" href="/static/css/css/demo.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/css/style.css"/>
    <script type="text/javascript" src="/static/js/image/modernizr.custom.53451.js"></script>
</head>
<script>
    window.onload = function() {
        let image = document.getElementsByClassName("dg-center");
        let id = image[0].firstChild.name
        let deleteA = "/admin/imageShow/deleteImage?imageId=";
        document.getElementById("deleteA").href = deleteA + id;
    }
    function changeImageId() {
        let image = document.getElementsByClassName("dg-center");
        let id = image[0].firstChild.name
        let deleteA = "/admin/imageShow/deleteImage?imageId=";
        document.getElementById("deleteA").href = deleteA + id;
    }
</script>
<style>
   #deleteIcon{
       position: relative;
       left: 240px;
       top: -100px;
       background-image:url('/static/img/icon/delete.svg');
       background-size: cover;
       background-repeat: no-repeat;
   }
</style>
<body>

<div class="container">

    <header>
        <nav class="codrops-demos">
            <a class="current-demo" href="/admin/imageShow">Navigation</a>
            <a href="/admin/imageShow2">Auto-Slideshow</a>
        </nav>
    </header>

    <section id="dg-container" class="dg-container">
        <div class="dg-wrapper">
            {{range $image := .images}}
                {{if eq $image.Path $.path}}
                    <a href="#"><img src="/{{$image.Path}}" alt="image01" width="480" height="260" name="{{$image.Id}}">
                        <div>{{$image.Name}}</div>
                    </a>
                    {{end}}
            {{end}}
            {{range $image := .images}}
                {{if ne $image.Path $.path}}
                    <a href="#"><img src="/{{$image.Path}}" alt="image01" width="480" height="260" name="{{$image.Id}}">
                        <div>{{$image.Name}}</div>
                    </a>
                {{end}}
            {{end}}

        </div>
        <nav>
            <span class="dg-prev" onclick="changeImageId()">&lt;</span>
            <span class="dg-next" onclick="changeImageId()">&gt;</span>
            <a href="/admin/imageShow/deleteImage?imageId=" id="deleteA">
                <span id="deleteIcon"></span></a>
        </nav>
    </section>
</div>

<script type="text/javascript" src="/static/js/jquery.min.js"></script>

<script type="text/javascript" src="/static/js/image/jquery.gallery.js"></script>
<script type="text/javascript">
    $(function () {
        $('#dg-container').gallery();
    });

    function confirmDelete(path) {
        if(confirm("还有继续吗？")){
            window.open(path);
        }else{
            alert("再见");
        }
    }
</script>
</body>
</html>